<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<script src="${pageContext.request.contextPath}/js/Echarts/china.js"></script>
<link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/css/system/step.css">
<script src="${pageContext.request.contextPath}/js/Jquery/step.js"></script>

<style>
	.waincontact div span{
		float:left;width:80px;line-height:34px;
	}
	.waincontact .contactbox input{
		width:60%;margin-bottom:15px;
	}
	.content1{
		margin-top:50px;
		display:none;
		margin-left:10%;
	}
	
	.cur{
		display:block;
	}
	.progressbar li{
	 	top:2px;
	}
	
	.progressbar li:before{
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius:50%;
            background:#ccc;
        }
        .progressbar li.active:before, .progressbar li.active:after {
            background: #1e87f0;;
            color: white;
            cursor:pointer;
        }
        .progressbar li:after{
            height:4px;
            background:#ccc;
            width: calc(100% - 25px);
            left: calc((-100% + 30px) / 2);
        }
		.progressbar li.active:hover::before{
            box-shadow: 0 0 3px 1px #1e87f0;
        }
        /*主机号样式*/
         ul li{
            list-style: none;
        }
        .hide{display: none}
        .width150{
            background: red;
		    width: 100%;
		    /* height: 150px; */
		    position: relative;
		    top: 0;
		    z-index: 1000;
        }
        .width150 input[type="text"]{
            width: 100%;
            height: 32px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding-left: 12px;
        }
        .width150 .ztree{
               width: 40%;
               padding-bottom: 20px;
			    border: 1px solid #ccc;
			    z-index: 1000;
			    position: absolute;
			    background: #fff;
			    /* top: 120px; */
			    /* left: 25%; */
			    top: 33px;
			    left: 100px;
        }
        .width150 li{
            padding: 5px;
        }
        .width150 li+li{
         
        }
        .ztree li span {
		    line-height: 16px;
		    margin-right: 2px;
		    float: none;
		}
		.width150 i:after{
			content:"";
			width: 0;
			height:0;
			display:bllock;
			border-width: 5px;
			border-style: solid;
			border-color: #333 transparent transparent transparent;
			position:absolute;
		    top: 12px;
    		left: 52%;
		}
		
		.modifytable tbody tr td{
			height:38px;
		}
</style>
<div ng-controller="autoDiscoveryController as controller">
	<div class="wrap">
		<div class="mapTips">
			<h6>
				<i class="glyphicon glyphicon-cog"></i> <span>条件设置</span>
			</h6>
		</div>
		<div class="conditionWrap">
			<div class="wrapFirst" style="height:103px; margin-bottom: 0;margin-top: 10px">
				<div class="steps" style="padding-top: 10px;"></div>
			</div>
		</div>
		
		<div class="tableDiv" style="width:100%;height:100%;min-height: 500px;background:#fff;">
			<div class="col-md-4 col-sm-4 col-xs-4" style="">
				<div style="border-right: 1px solid #666;margin-top:30%;width:100%;">
					<img id="images" style="width:85%;margin-left:5%;border-radius: 50%;" src="${pageContext.request.contextPath}/images/images/pople1.png" />
				</div>
			
			</div>

			<div class="col-md-8 col-sm-8 col-xs-8 waincontact" style="">
				<!-- 默认规则显示 -->
				<div class="content1 cur" id="defaultRule" style="">
					<h1 style="">指标规则配置</h1>  
					<div class="" style="margin-bottom:20px;width:100%;float:left;">
						<div class="width150">
					        <span style="float:left;width: 100px;">可多选主机号：</span>
					        <input style="float:left;width:40%;" type="text" id="yearInput" placeholder="主机号" readonly>
					        <i></i>
					        <ul name="hostid" class="ztree" id="warningSelectIP" style="display:none;height:300px;overflow: auto;" ></ul>
					    </div>
					</div>
					
					<div style="height:300px;overflow:auto;width:100%;border:1px solid #ddd;border-top: none;">
						
					<table class="table table-bordered ruletable" style="font-size: 13px;width:100%;margin:0;">
						<thead>
						<tr>
							<th style="width:35%;">描述</th>
							<th style="display:none;">name</th>
							<th>取值范围</th>
							<th style="width:20%;">类型</th>
							<th style="width:25%;">是否加入白名单</th>
						</tr>
						</thead>
						<tbody>
							<tr ng-repeat="data in ruletable">
								
								<td>
									<input type="text" class="form-control" id="ruledesc" value="{{data.desc}}" style="height:21px;width: 89%;padding: 0px 0px;font-size: 1px">
								</td>
								<td id="rulename" style="display:none;">{{data.name}}</td>
								<td>
									<input type="text"
									 id="lv1_low"  value="{{data.min}}" style="height:21px;width: 27%;padding: 0px 0px;font-size: 1px">-
									<input type="text"
									 id="lv1_high"  value="{{data.max}}" style="height:21px;width: 27%;padding: 0px 0px;font-size: 1px">
								</td>
								<td ng-switch="data.level">	
									<p ng-switch-default>
										<select id="rulewarintype" style="">
											<option  value="1">预警</option>
											<option  value="2">危险</option>
											<option  value="3">严重</option>
										</select>
									</p>
									<p ng-switch-when="2">
										<select id="rulewarintype" style="">
											<option  value="2">危险</option>
											<option  value="1">预警</option>
											<option  value="3">严重</option>
										</select>
									</p>							 
									<p ng-switch-when="3">
										<select id="rulewarintype" style="">
											<option  value="3">严重</option>
											<option  value="1">预警</option>
											<option  value="2">危险</option>
										</select>
									</p>	
								</td>
								<td>
									<select class="selectpicker" style="width:50px;" id="rulewhite">
										<option vaule="">否</option>
										<option vaule="">是</option>
									</select>
								</td>
							</tr>
						</tbody>
						
					</table>
					</div>
					
					<div style=" float:right;margin:3% 1%;">
				
						<button style="" class="btn btn-info jump1 setrule">下一步</button>
					</div>	
				</div>	
				<div class='contactbox content1' style="">
					<h1>预警联系人信息</h1>
					<div><span style="">联系人名称：</span>
						<input style="" id="warinpeoplename"  type="text" class="form-control" id="" placeholder="联系人名称">
					</div>
					<div><span style="">告警类型：</span>
						<input style="" id="warinpeopletype" value=""  type="text" readonly="readonly" class="form-control" placeholder="预警">
					</div>
					<div>
						<input type="radio" name="warincontant" class="form-control" id="" value="1" onclick="notice()" style="width:14px;float:left;margin:0 2% 15px 14%;"><u style='text-decoration: none;float:left;'>手机号</u>
						<input type="radio" name="warincontant" class="form-control" id="" value="2" onclick="notice()" style="width:14px;float:left;margin:0 2% 15px 5%;"><u style='text-decoration: none;float:left;'>邮箱</u>
						<input type="radio" name="warincontant" class="form-control" id="" value="3" onclick="notice()" style="width:14px;float:left;margin:0 2% 15px 5%;"><u style='text-decoration: none;float:left;'>邮箱+手机号</u>
					</div>
					<div style="clear: both;"><span style="">手机号：</span>
						<input style="" id="warinphone"  type="text"  class="form-control" id="" placeholder="手机号">
					</div>
					<div><span style="">邮箱：</span>
						<input style="" id="warinemail" type="text"  class="form-control" id="" placeholder="邮箱">
					</div>
					<div style="">
						
						<button style="margin-left: 62%;" class="btn btn-info jump1 warinPeople">下一步</button>
					</div>	
				</div>
				
				<div class='contactbox content1' style="">
					<h1>危险联系人信息</h1>
					<div><span style="">联系人名称：</span>
						<input style=""  type="text" class="form-control" id="dangerpeople" placeholder="联系人名称">
					</div>
					<div><span style="">告警类型：</span>
						<input style=""  type="text" class="form-control" id="dangertype" readonly="readonly" placeholder="危险">
					</div>
					<div>
						<input type="radio" name="dangercontant" class="form-control" onclick="danger()" value="1" style="width:14px;float:left;margin:0 2% 15px 14%;"><u style='text-decoration: none;float:left;'>手机号</u>
						<input type="radio" name="dangercontant" class="form-control" onclick="danger()" value="2" style="width:14px;float:left;margin:0 2% 15px 5%;"><u style='text-decoration: none;float:left;'>邮箱</u>
						<input type="radio" name="dangercontant" class="form-control" onclick="danger()" value="3" style="width:14px;float:left;margin:0 2% 15px 5%;"><u style='text-decoration: none;float:left;'>邮箱+手机号</u>
					</div>
					<div style="clear: both;"><span style="">手机号：</span>
						<input style=""  type="text" class="form-control" id="dangerphone" placeholder="手机号">
					</div>
					<div><span style="">邮箱：</span>
						<input style=""  type="text" class="form-control" id="dangeremail" placeholder="邮箱">
					</div>
					<div style="">
				
						<button style="margin-left: 62%;" class="btn btn-info jump1 dangerPeople"  onclick='gotoStep(4)'>下一步</button>
					</div>	
				</div>
				<div class='contactbox content1' style="">
					<h1>严重联系人信息</h1>
					<div><span style="">联系人名称：</span>
						<input style=""  type="text" class="form-control" id="seriouspeople" placeholder="联系人名称">
					</div>
					<div><span style="">告警类型：</span>
						<input style=""  type="text" class="form-control" readonly="readonly" id="seriousstyle" placeholder="严重">
					</div>
					<div>
						<input type="radio" name="seriouscontant" class="form-control" onclick="serious()" id="" value="1" style="width:14px;float:left;margin:0 2% 15px 14%;"><u style='text-decoration: none;float:left;'>手机号</u>
						<input type="radio" name="seriouscontant" class="form-control" onclick="serious()" id="" value="2" style="width:14px;float:left;margin:0 2% 15px 5%;"><u style='text-decoration: none;float:left;'>邮箱</u>
						<input type="radio" name="seriouscontant" class="form-control" onclick="serious()" id="" value="3" style="width:14px;float:left;margin:0 2% 15px 5%;"><u style='text-decoration: none;float:left;'>邮箱+手机号</u>
					</div>
					<div style="clear: both;"><span style="">手机号：</span>
						<input style="" type="text" class="form-control" id="seriousphone" placeholder="手机号">
					</div>
					<div><span style="">邮箱：</span>
						<input style=""  type="text" class="form-control" id="seriousemail" placeholder="邮箱">
					</div>
					<div style="">
						<button style="margin-left: 62%;" class="btn btn-info jump1 jump4">下一步</button>
					</div>	
				</div>	
				
				
				<!-- 频率 -->
				<div class="contactbox content1" style="width:100%;margin-left:0;">
					<h1>频率展示</h1>
					<div style="width:30%;float:left;margin-top:10px;">
						<div style="" class="ztree" id="hostztree"></div>
					</div>
					<div style="width:70%;float:left;padding-left:2%;">
						
						<label class="" style="margin-bottom: 15px;width: 100%;padding-left:0;margin-top: 10px;"">
							<span style="float:left;width:20%;font-size: 11px;">数据采集频率：</span>
								<select ng-model="selectedSite2" style="width: 60%; height: 34px;border-radius: 4px;" >
										<option ng-repeat="x in frequercyTable" value="{{x.times}}">{{x.times}}次</option>
								</select>
								<span id="frecollection" style="display:none;">{{selectedSite2.name}}</span>
						</label>
						<label class="" style="margin-bottom: 15px;width: 100%;padding-left:0;margin-top: 10px;"">
							<span style="float:left;width:20%;font-size: 11px;">告警频率：</span>
								<select  ng-model="selectedSite3" style="width: 60%; height: 34px;border-radius: 4px;" >
									<option ng-repeat="x in frequercyTable" value="{{x.minutes}}">{{x.minutes}}分钟</option>	
								</select>
								<span id="frewarin" style="display:none;">{{selectedSite3.name}}</span>
						</label>
						</div>
						
					<div style="">
					
						<button style="margin-left: 76%;" class="btn btn-info jump1 frequency">下一步</button>
					</div>	
				</div>
				<!-- 运维命令项 -->
				
				<div class="contactbox content1" style="width:100%;margin-left:0;">
					<h1>运维命令</h1>
					<div style="width:30%;float:left;margin-top:10px;">
						<div style="" class="ztree" id="hostztree2"></div>
					</div>
					<div style="width:65%;margin-bottom:20px;float:right;margin-top: 14px;height:300px;overflow: auto;border:1px solid #ddd;border-left: none;border-top: none;">
						<table class="table table-bordered modifytable" style="font-size: 13px;width:100%;margin:0;">
							<thead>
								<tr>
									<th>监控指标</th>
									<th>kpi_name</th>
									<th>运维命令</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="data in operation">
									<td id="kpi_desc"></td>
									<td id="kpi_name"></td>
									<td id="cmdtd">
										
									</td>
									
								</tr>
								<!-- 
								<tr ng-repeat="data in operation">
									<td id="kpi_desc">{{data.kpi_name}}</td>
									<td>
										<input type="text" class="form-control" id="kpi_cmd" value="{{data.kpi_cmd}}" style="height:21px;width: 89%;padding: 0px 0px;font-size: 1px">
										
									</td>
									
								</tr>
								 -->
							</tbody>
						
						</table>
					</div>			
					<div style="">
						<button style="float:left;margin-left:89%;" class="btn btn-info jump1 jump2 endsumbit">下一步</button>
					</div>
				 </div>
				
				
			</div>

		</div>
			
	</div>
</div>
<script type="text/javascript">
	
	$(function () {
		initStep();
	});
	
	function initStep() {
		$(".steps").step({
		  stepNames: ['默认规则显示','预警联系人信息', '危险联系人信息', '严重联系人信息','频率','运维命令', '完成'],
		  initStep: 1
		})
	}
	
	function previousStep() {
		$(".steps").step("previous");
	}
	
	function nextStep() {
		$(".steps").step("next");
	}
	
	function gotoStep(step) {
		$(".steps").step("goto", step);
		$(".content1").eq(step-1).addClass('cur').siblings().removeClass('cur');
	    $(".progressbar li.active").click(function () {
	         now=$(this).index() + 1;
	         gotoStep(now);
	         $(".content1").eq(now-1).addClass('cur').siblings().removeClass('cur');
	     });
	     
	}
	
	//预警联系人
	function notice(){
		var val=$('input:radio[name="warincontant"]:checked').val();
		console.log(val);
		if(val==null){
			console.log("没选中radio");
		}else{
			if(val==1){
				$("#warinphone").removeAttr('readonly');//添加readyonly属性
				$('#warinemail').attr('readonly','readonly');//移除readonly属性
			}else if(val==2){
				$('#warinphone').attr('readonly','readonly');//移除readonly属性
				$("#warinemail").removeAttr('readonly');
			}else if(val==3){
				$("#warinphone").removeAttr('readonly');
				$("#warinemail").removeAttr('readonly');
			}
		}
	}
	
	//危险联系人
	function danger(){
		var val=$('input:radio[name="dangercontant"]:checked').val();
		console.log(val);
		if(val==null){
			console.log("没选中radio");
		}else{
			if(val==1){
				$("#dangerphone").removeAttr('readonly');//添加readyonly属性
				$('#dangeremail').attr('readonly','readonly');//移除readonly属性
			}else if(val==2){
				$('#dangerphone').attr('readonly','readonly');//移除readonly属性
				$("#dangeremail").removeAttr('readonly');
			}else if(val==3){
				$("#dangerphone").removeAttr('readonly');
				$("#dangeremail").removeAttr('readonly');
			}
		}
	}
	
	//严重联系人
	function serious(){
		var val=$('input:radio[name="seriouscontant"]:checked').val();
		console.log(val);
		if(val==null){
			console.log("没选中radio");
		}else{
			if(val==1){
				$("#seriousphone").removeAttr('readonly');//添加readyonly属性
				$('#seriousemail').attr('readonly','readonly');//移除readonly属性
			}else if(val==2){
				$('#seriousphone').attr('readonly','readonly');//移除readonly属性
				$("#seriousemail").removeAttr('readonly');
			}else if(val==3){
				$("#seriousphone").removeAttr('readonly');
				$("#seriousemail").removeAttr('readonly');
			}
		}
	}
	
	
</script>